<template>
  <div class="main-list">
    <div class="shaixuan">
      <span class="reback-title">共回收<span class="lanse">{{ orderList.length }}</span>个单号</span>
      <span style="float: right" @click="shaixuan"><span class="lanse">筛选</span><img class="filter-icon" src="/static/images/shaixuan.png"></span>
    </div>
    <!-- 筛选弹框 -->
    <div class="shaixuan-tanchuan" v-show="timeFlag">
      <div class="shaixuan-mian clearfix">
        <!-- 搜索框 -->
        <div class="shaixuan-item">
          <div class="search-bar">
            <view>
              <picker
                class="select"
                @change="selectChange"
                :range="selectArr"
              >
                <view class="picker"> {{selectArrName}}</view>
              </picker>
            </view>
            <div class="weui-search-bar__box">
              <i class="weui-icon-search" @click="load"></i>
              <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="订单编号/快递单号/买家昵称" required="" v-model="searchValue" placeholder-style="color:#A3AAB7;">
              <a href="javascript:" class="weui-icon-clear" id="searchClear" v-if="searchValue" @click="clear"></a>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="shaixuan-item reback">回收时间</div>
        <div class="shaixuan-item">
          <a  @click="setTime(1)" :class="['day-btn', timeValue == 1 ? 'active' : '']">今天</a>
          <a  @click="setTime(2)" :class="['day-btn', timeValue == 2 ? 'active' : '']">昨天</a>
          <a  @click="setTime(3)" :class="['day-btn', timeValue == 3 ? 'active' : '']">最近七天</a>
        </div>
        <div class="shaixuan-item">
          <a class="start-time">
            <picker mode="date" @change="startChange">{{ startDateStr }}</picker>
          </a>
          <span style="color:#A3AAB7;">~</span>
          <a class="end-time">
            <picker mode="date"  @change="endChange">{{ endDateStr }}</picker>
          </a>
        </div>
        <div class="shaixuan-item shaixuan-foot">
          <a style="width: 50%;background-color: #FFFFFF;" class="cancel" @click="doCancle">取消</a>
          <a style="float: right;width: 50%;background-color: #0077ff;" class="confirm" @click="loadByTime">确定</a>
        </div>
      </div>
    </div>
    <!-- 筛选列表 -->
    <div class="shop-itenm" v-for="(order,index) in orderList">
      <div class="first">
        <span>{{ order.logisticsOrderNo }}</span>
        <span  style="float: right"> {{ order.createDateStr }}</span>
      </div>
      <div class="second">
        <img style="height: 15px;width: 15px;margin-right: 5px" src="/static/images/pinduoduo.png"/>
        <span >{{ order.shopName}}</span>
        <span class="name">{{ order.receiverName}}</span>
      </div>
      <div class="third">
        <span>运单号：</span>
        <span>{{ order.logisticsNo }}</span>
        <span style="float:right;font-size:13px;">{{  order.templateName  }}</span>
      </div>
    </div>
    <!-- 底部提示 -->
    <div class="no-data">亲，没有更多了～</div>
    <toast ref="mytoast"/>
  </div>
</template>

<script>
    import api from '@/utils/api'
    import toast from "@/components/toast";

    export default {
        components: {toast},

        data() {
            return {
                timeValue : '',
                orderList : [],
                searchValue : "",
                startDate : "",
                endDate : "",
                startDateStr : "开始时间",
                endDateStr : "结束时间",
                timeFlag : false,
                logisticsNo : '',
                tradeNo : '',
                buyerNick : '',
                selectArr:['订单编号','快递单号','买家昵称'],
                selectArrName: "订单编号",
                selectArrIndex: 0,
            };
        },

        created() {
        },

        onShow() {
            this.orderList = [];
            this.searchValue = "";
            this.startDate = "";
            this.endDate = "";
            this.startDateStr = "开始时间";
            this.endDateStr = "结束时间";
            this.selectArrIndex = 0;
            this.selectArrName = "订单编号";
            this.timeFlag = false;
            this.timeValue = '';
            this.getJintian();
            this.load();
        },

        methods: {
            selectChange(e) {
                var index = e.mp.detail.value;
                this.selectArrIndex = index;
                this.selectArrName = this.selectArr[index];
            },

            shaixuan(){
                this.timeFlag = true;
            },

            getJintian(){
                var time = new Date();
                var year = time.getFullYear();
                var month = time.getMonth() + 1;
                var date = time.getDate();
                this.startDate = year + "-" + this.add0(month) + "-" + this.add0(date) + " 00:00:00"
                this.endDate = year + "-" + this.add0(month) + "-" + this.add0(date) + " 23:59:59";
            },
            getZuotian(){
                var time = new Date();
                time.setTime(time.getTime() - 24*60*60*1000);
                var year = time.getFullYear();
                var month = time.getMonth() + 1;
                var date = time.getDate();
                this.startDate = year + "-" + this.add0(month) + "-" + this.add0(date) + " 00:00:00"
                this.endDate = year + "-" + this.add0(month) + "-" + this.add0(date) + " 23:59:59";
            },
            getQitian(){
                var time = new Date();
                var year = time.getFullYear();
                var month = time.getMonth() + 1;
                var date = time.getDate();
                this.endDate = year + "-" + this.add0(month) + "-" + this.add0(date) + " 23:59:59";
                time.setTime(time.getTime() - 7*24*60*60*1000);
                var year = time.getFullYear();
                var month = time.getMonth() + 1;
                var date = time.getDate();
                this.startDate = year + "-" + this.add0(month) + "-" + this.add0(date) + " 00:00:00"
            },

            doCancle(){
                this.timeFlag = false;
            },

            loadByTime(){
                this.timeFlag = false;
                this.load();
            },

            setTime(value){
                this.timeValue = value;
              if(value == 1){
                this.getJintian();
              }else if(value == 2){
                this.getZuotian()
              }else if(value == 3){
                  this.getQitian()
              }
            },

            startChange(e){
                var t = e.mp.detail.value;
                this.startDate = t + " 00:00:00";
                this.startDateStr = t;
                console.log(t)
            },
            endChange(e){
                var t = e.mp.detail.value;
                this.endDate = t + " 23:59:59";
                this.endDateStr = t;
                console.log(t)
            },
            load(){
                var _this = this;
                if(this.selectArrIndex == 0){
                    this.logisticsNo = this.searchValue;
                    this.tradeNo = '';
                    this.buyerNick = '';
                }else if(this.selectArrIndex == 1){
                    this.logisticsNo = '';
                    this.tradeNo = this.searchValue;
                    this.buyerNick = '';
                }else if(this.selectArrIndex == 2){
                    this.logisticsNo = '';
                    this.tradeNo = '';
                    this.buyerNick = this.searchValue;
                }else{
                    this.logisticsNo = '';
                    this.tradeNo = '';
                    this.buyerNick = '';
                }
                wx.request({
                    url: wx.getStorageSync("otherPath") + api.queryRecycleLogisticsNoLogList + "?ecstoken=" + wx.getStorageSync("sessionId"),
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        ecstoken : wx.getStorageSync('sessionId'),
                        fslb : wx.getStorageSync('fslb')
                    },
                    method: "POST",
                    data: {
                        "startdate" : _this.startDate,
                        "enddate" : _this.endDate,
                        "logisticsNo" : _this.logisticsNo,
                        "tradeNo" : _this.tradeNo,
                        "buyerNick" : _this.buyerNick,
                    },
                    success(res) {
                        console.log(res);
                        if (res.data.code != 200) {
                            _this.$refs.mytoast.show(res.data.msg);
                            return;
                        }
                        _this.orderList = [];
                        res.data.data.data.forEach(order =>{
                            var str = order.createDate;
                            if(str){
                                order.createDateStr = _this.getriqi(str);
                            }
                            _this.orderList.push(order);
                        })
                    },
                    fail(res) {
                        console.log(res);
                        _this.$refs.mytoast.show("网络异常");
                    },
                    complete(){

                    }
                });
            },
            clear(){
              this.searchValue = '';
            },
            getriqi(time) {
                //timestamp是整数，否则要parseInt转换,不会出现少个0的情况
                var time = new Date(time);
                var year = time.getFullYear();
                var month = time.getMonth() + 1;
                var date = time.getDate();
                var hours = time.getHours();
                var minutes = time.getMinutes();
                var seconds = time.getSeconds();
                return year + "-" + this.add0(month) + "-" + this.add0(date) + " " + this.add0(hours) + ":" + this.add0(minutes) + ":" + this.add0(seconds);
            },
            add0(m) {
                return m < 10 ? "0" + m : m;
            },
        }
    };
</script>

<style lang="wxss">
  page {
    width: 100%;
    height: 100%;
    background-color: #f7fbff;
  }
  .shaixuan-item .search-bar{
    width: 100%;

    background: #fff;
  }
  .shaixuan-item .weui-search-bar__box{
    padding:0 ;
    height:50rpx;

  }
  .shaixuan-item .weui-search-bar__box .weui-search-bar__input{
    height: 100%;
    box-sizing: border-box;
    padding: 0 70rpx;
    padding-left: 240rpx;
  }

</style>

<style scoped>
.clearfix::after{
  content:"";
  display: block;
  clear: both;
}
  .main-list{
    width: 100%;
    height: 100%;
  }
  .shaixuan-tanchuan {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    background-color: rgba(0, 23, 50, 0.5);
    z-index: 100;
  }

  .shaixuan{
    height: 40px;
    line-height: 40px;
    box-shadow:0px 2px 4px 0px rgba(7,127,255,0.1);
    background-color: #FFFFFF;
    padding-left: 10px;
    padding-right: 10px;
    font-size:14px;
    font-family:PingFang SC;
    font-weight:500;

  }

  .shaixuan .lanse{
    color:rgba(0,119,255,1);
  }

  .shop-itenm {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
    background-color: #FFFFFF;
    height: 120px;
    box-shadow:0px 2px 4px 0px rgba(7,127,255,0.1);
  }

  .shop-itenm div{
    height: 40px;
    line-height: 40px;
  }

  .first{
    font-size:12px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(118,125,143,1);
  }

  .second{
    border-top: 1px solid #e8eaf0;
    border-bottom: 1px solid #e8eaf0;
  }

  .second div{
    font-size:14px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(55,62,79,1);
  }

  .second .name{
    float: right
  }

  .third{
    font-size:12px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(55,62,79,1);
  }

  .shaixuan-mian{
    position: relative;
    /* top */
    width: 100%;
    box-sizing: border-box;
    height: 450rpx;
    background:rgba(255,255,255,1);
    box-shadow:0px 3px 5px 0px rgba(0,119,255,0.12);
    border-top:  1px solid #E8EAF0;
    padding:0 30rpx;
  }

  /* 输入框 */
.weui-search-bar {
  position: relative;
  width: 100%;
  height: 81rpx;
  background-color: #f7fbff;
}
.search-bar .weui-picker{
  top: calc(50% -28rpx);
}
.select {
  position: absolute;
  /* top: 17rpx; */
  left: 45rpx;
  width: 23%;
  height: 50rpx;
  /* border-radius: 25rpx; */
  border-right: 1rpx solid #e8eaf0;
  font-size: 26rpx;
  line-height: 50rpx;
  color: #373e4f;
  font-weight: 500;
  z-index: 10;
  text-indent: 0.5em;
}
.select::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: 20rpx;
  top: 14rpx;
  width: 14rpx;
  height: 14rpx;
  border-right: 1rpx solid #888;
  border-top: 1rpx solid #888;
  -webkit-transform: rotate(135deg); /*箭头方向可以自由切换角度*/
  transform: rotate(135deg);
}

  /* 筛选item */
  .shaixuan-item{
    height: 50rpx;
    line-height: 50rpx;
    margin: 30rpx auto;
    display: flex;
    justify-content: space-between;
  }

  .shaixuan-item a{
    /* width:50%; */
    font-size:24rpx;
    font-family:PingFang SC;
    font-weight:500;
    text-align: center;
  }

  .reback-title{
    color: #767D8F
  }

  .reback{
    color: #767D8F;
    font-size: 28rpx;
    margin: 30rpx 0;
  }
  .shaixuan-item .day-btn:active{
    color: #0077FF;
    border:1px solid #0077FF;
  }
  .shaixuan-item .day-btn.active{
    color: #0077FF;
    border:1px solid #0077FF;
  }
  .shaixuan-item .day-btn{
    width:180rpx;
    height: 50rpx;
    color: #373E4F;
    border: 1px solid #E8EAF0;
    border-radius: 25rpx;
  }
  .shaixuan-item .start-time,.end-time{
    width: 300rpx;
    height: 50rpx;
    text-align: center;
    color: #A3AAB7;
    border: 1px solid #E8EAF0;
    border-radius: 25rpx;
  }
  /* .weui-search-bar__box {
    padding-left: 240rpx;
  } */
  .weui-search-bar__box .weui-search-bar__input {
    height: 100%;
    font-size: 26rpx;
    line-height: 75rpx;
    /* padding: 0; */
  }
  /* 调整搜索的起始位置 */
  .weui-search-bar__box .weui-icon-search {
    /* left: 200rpx; */
    margin-top: -23rpx;
    margin-left: 170rpx;

  }

  /* 筛选底部 */
  .shaixuan-foot{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80rpx;
    margin: 0 auto;
  }

  /* 确认取消 */
  .shaixuan-item .cancel,.shaixuan-item .confirm{
    width: 50%;
    height: 80rpx;
    font-size: 30rpx;
    line-height: 80rpx;
    text-align: center;
  }
  .shaixuan-item .cancel{
    border-top: 1px solid #E8EAF0;
    color: #373E4F;
  }
  .shaixuan-item .confirm{
    background: #0077FF;
    color: #FFFFFF;
  }
  .confirm:active{
    opacity: 0.3;
  }
  .cancel:active{
 opacity: 0.3;
  }


  .weui-search-bar__form {
    width: 92%;
    height: 50rpx;
    margin: 30rpx auto;
    border-radius: 50rpx;
    box-shadow: 0px 1rpx 6rpx 0px rgba(0, 119, 255, 0.16);
  }



  .no-data {
    color: #a3aab7;
    width: 2rem;
    height: 0.3rem;
    margin: 0 auto;
    margin-top: 0.3rem;
    text-align: center;
    font-size: 0.24rem;
    line-height: 0.26rem;
  }

  /* 筛选弹框相关样式 */
  .filter-icon{
    display: inline-block;
    vertical-align: middle;
    width: 26rpx;
    height: 28rpx;
    margin-top: -4rpx;
    margin-left: 9rpx;
  }
  #searchInput{
    /* border: 1px solid  */
    box-shadow:0px 1px 6px 0px rgba(0,119,255,0.16);
    border-radius:50rpx;
  }
</style>
